<template>
  <yt-crud
  ref="crudRef" :data="data" :column="column"
  :loading="state.loading"
  :tableProps=" {
    selection: false,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    menuSlot: true,
    menuWidth: 120,
  }"
  :funProps="{
    addBtn: false,
    delBtn: false,
  }"
  @on-load="getData"
  >
      <template #menuSlot="scope">
        <el-button type="text" size="small" @click="removeFromSpace(scope.row.deviceId)">移除</el-button>
      </template>

      <template #type="{ row }">{{ getNodeTypeName(row.product) }}</template>
      <template #online="scope">
        <el-tag class="state" v-if="scope.row.online === true" type="success" size="small">在线</el-tag>
        <el-tag class="state" v-else-if="scope.row.online === false" type="danger" size="small">离线</el-tag>
      </template>
      <template #deviceCustomName="{ row }">{{ row.deviceCustomName || '未定义' }}</template>
  </yt-crud>
</template>
<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'
import YtCrud from '@/components/common/yt-crud.vue'

import { getSpaceDevices, spaceRemoveDevice } from './api/building.api'
import { getProductsList, IProductsVO } from '../device/api/products.api'

const route = useRoute()
const { id } = route.params

const column = ref<IColumn[]>([
  {
    label: '设备ID',
    key: 'deviceId',
    hide: true,
  },
  {
    label: '设备自定义名称',
    key: 'deviceCustomName',
    slot: true,
  },
  {
    label: '产品',
    key: 'productKey',
    type: 'select',
    search: false,
    colSpan: 12,
    tableWidth: 260,
    editDisabled: true,
    componentProps: {
      labelAlias: 'name',
      valueAlias: 'productKey',
      options: [],
    },
  },
  {
    label: '设备类型',
    key: 'type',
    slot: true,
    tableWidth: 180,
    componentProps: {
      labelAlias: 'nickName',
      valueAlias: 'id',
      options: [],
    },
  },
  {
    label: '关键字',
    key: 'keyword',
    formHide: true,
    hide: true,
    search: false,
  },
  {
    label: '设备DN',
    key: 'deviceName',
    tableWidth: 280
  },
  {
    label: '状态',
    key: 'online',
    type: 'select',
    componentProps: {
      options: [
        {
          label: '在线',
          value: true,
        },
        {
          label: '离线',
          value: false,
        },
      ],
    },
    search: false,
    tableWidth: 100,
    slot: true,
  },
])

const data = ref()

const state = reactive({
  // page: {
  //   pageSize: 10,
  //   pageNum: 1,
  // },
  // total: 0,
  loading: false,
  // query: {
  //   // group: id
  // },
})

// 产品字典
const productOptions = ref<IProductsVO[]>([])
const getDict = () => {
  getProductsList({
    pageNum: 1,
    pageSize: 99999,
  }).then((res) => {
    productOptions.value = res.data.rows || []
    column.value.forEach((item) => {
      if (item.key === 'productKey') {
        item.componentProps.options = productOptions.value
      }
    })
  })
}
getDict()

// 获取设备类型
const getNodeTypeName = (p) => {
  if (!p) {
    return '直连设备'
  }
  const nodeType = p.nodeType ? p.nodeType : 0
  return ['网关设备', '网关子设备', '直连设备'][nodeType]
}

const getData = () => {
  state.loading = true
  getSpaceDevices(id)
  // {
  //   ...state.page,
  //   ...state.query
  // }
  .then(res => {
    data.value = res.data
    // state.total = res.data.total
  })
  .finally(() => 
    state.loading = false
  )
}

// 移除
const removeFromSpace = (deviceId: string) => {
  spaceRemoveDevice(deviceId).then(res => {
    // 移除成功
    if (res.code == 200 ) {
      ElMessage.success('移除成功!')
      getData()
    }
  })
}
</script>

